// 先获取数据
var page = 1;
function diyi(){
    ajax({
        methods:'get',
        url:'/user/list',
        params:{
            page:page,
            count:4
        }
    }).then((data)=>{
          var data=data.list
          function reunder(data){
            var str=``
            str=data.map((item,index)=>{
              return `<ul class="row">
              <li>${item.email}</li> 
              <li>${item.name}</li>
              <li>${item.phone}</li>
              <li>${item.ingroup}</li>
              <li>${item.isadmin?'是':'否'}</li>
              <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
              <li>
                  <span class="iconfont icon-bianji editicon" id="101"></span>
                  <span class="iconfont icon-shanchu deleteicon" id="101"></span>
              </li>
          </ul>
              `
            }).join('')
            if( str == '' ){
                str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
            }
            document.querySelector('.table .table-body').innerHTML = str ;
          }
          reunder(data)
    })
}
diyi()
// 获得数据之后就可以渲染数据了
var shang = document.querySelector(".prev")
var xia = document.querySelector('.next')


shang.onclick = function () {
    console.log(555)
if(page<=3){
    shang.disabled=true
}
if (page > 1) {
    ajax({
        methods:'get',
        url:'/user/list',
        params:{
            page:--page,
            count:4
        }
    }).then((data)=>{
        var data=data.list
        function reunder(data){
          var str=``
          str=data.map((item,index)=>{
            return `<ul class="row">
            <li>${item.email}</li> 
            <li>${item.name}</li>
            <li>${item.phone}</li>
            <li>${item.ingroup}</li>
            <li>${item.isadmin?'是':'否'}</li>
            <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
            <li>
                <span class="iconfont icon-bianji editicon" id="101"></span>
                <span class="iconfont icon-shanchu deleteicon" id="101"></span>
            </li>
        </ul>
            `
          }).join('')
          if( str == '' ){
              str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
          }
          document.querySelector('.table .table-body').innerHTML = str ;
        }
        reunder(data)

})
xia.disabled=false
}
}
// 这个是加号部分

xia.onclick = function () {
if(page>=4){
    xia.disabled=true
}
if (page < 6) {
    ajax({
        methods:'get',
        url:'/user/list',
        params:{
            page:++page,
            count:4
        }
    }).then((data)=>{
        var data=data.list
        function reunder(data){
          var str=``
          str=data.map((item,index)=>{
            return `<ul class="row">
            <li>${item.email}</li> 
            <li>${item.name}</li>
            <li>${item.phone}</li>
            <li>${item.ingroup}</li>
            <li>${item.isadmin?'是':'否'}</li>
            <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
            <li>
                <span class="iconfont icon-bianji editicon" id="101"></span>
                <span class="iconfont icon-shanchu deleteicon" id="101"></span>
            </li>
        </ul>
            `
          }).join('')
          if( str == '' ){
              str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
          }
          document.querySelector('.table .table-body').innerHTML = str ;
        }
        reunder(data)

})
shang.disabled=false
}
}
// 这个是减号部分

//获取搜索按钮
var searchBtn = document.querySelector('.searchbox .search');
//获取输入框
var inputEle = document.querySelector('.searchbox input');

//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
// searchBtn.onclick = ()=>{
//     axios.get( '/user/search', { params:{ searchkey: inputEle.value  }  } ).then((res)=>{
//         render( res.data.list )
//         console.log(res.data);
//     })
// }
searchBtn.onclick = ()=>{
    ajax({
        methods:'get',
        url:"/user/search",
        params:{
            searchkey: inputEle.value 
        }
    }).then((data)=>{
        function reunder(data){
            data=data.list
            var str=``
            str=data.map((item,index)=>{
              return `<ul class="row">
              <li>${item.email}</li> 
              <li>${item.name}</li>
              <li>${item.phone}</li>
              <li>${item.ingroup}</li>
              <li>${item.isadmin?'是':'否'}</li>
              <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
              <li>
                  <span class="iconfont icon-bianji editicon" id="101"></span>
                  <span class="iconfont icon-shanchu deleteicon" id="101"></span>
              </li>
          </ul>
              `
            }).join('')
            if( str == '' ){
                str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
            }
            document.querySelector('.table .table-body').innerHTML = str ;
          }
          reunder(data)
    })
}


    ajax({
        methods:'post',
        url:"/user/login",
        params:{
            phone:'13611129070',pass:'1234'
        }
    })/then((data)=>{
        console.log(data)
    })